<template>
    <el-dialog
        class="re-dialog accept-dialog"
        :close-on-click-modal="false"
        title="事件详情"
        :visible.sync="dialogVisible"
        height="440px"
        width="800px"
    >
        <div class="taaept-box">
            <div>
                <div class="tissue">
                    <img src="../../assets/pigeonholes/tissue_icon.png" alt="组织架构" />
                    <span>肥乡区组织架构</span>
                </div>
                <el-tree
                    class="taaept-tree"
                    icon-class="el-icon-arrow-right"
                    :data="treeData"
                    @node-click="handleNodeClick"
                    default-expand-all
                ></el-tree>
            </div>
            <div>
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
                    <el-form-item label="事件名称：" :label-width="formLabelWidth">
                        <el-input readonly placeholder="请输入名称" :value="record.eventName"></el-input>
                    </el-form-item>
                    <el-form-item label="事件地点：" :label-width="formLabelWidth">
                        <el-input readonly placeholder="请输入地点" :value="record.eventAddress"></el-input>
                    </el-form-item>
                    <el-form-item
                        label="事件来源："
                        :label-width="formLabelWidth"
                    >{{this.initsourceCode(record.eventSourceCode)}}</el-form-item>
                    <el-form-item
                        label="上报时间："
                        :label-width="formLabelWidth"
                    >{{getTimeStr(record.createTime) || ""}}</el-form-item>
                    <el-form-item label="事件描述：" :label-width="formLabelWidth">
                        <el-input type="textarea" placeholder="请输入描述" :value="record.eventDetail"></el-input>
                    </el-form-item>
                    <el-form-item label="处理意见：" :label-width="formLabelWidth" prop="opinion">
                        <el-input
                            type="textarea"
                            placeholder="请输入意见"
                            v-model="ruleForm.opinion"
                            :maxlength="1000"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="附件：" :label-width="formLabelWidth">
                        <div v-if="record.sysAttrFiles&&record.sysAttrFiles.length>0">
                            <img
                                v-for="(item,index) in record.sysAttrFiles"
                                :key="index"
                                class="fujianImg"
                                alt="点击查看附件"
                                title="点击查看附件"
                                @click="onShowImg(item.uploadPath)"
                                :src="item.uploadPath"
                            />
                        </div>
                        <span v-else>暂无附件</span>
                    </el-form-item>
                    <el-form-item label="转发部门：" :label-width="formLabelWidth" prop="dealUnit">
                        <el-tag
                            style="margin-right:4px"
                            size="small"
                            v-for="(tag,index) in ruleForm.dealUnit"
                            :key="index"
                            closable
                            type="info"
                            @close="handleClose(index)"
                        >{{tag.label}}</el-tag>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm('ruleForm')" size="small">分 拣</el-button>
        </span>
        <div v-if="!!currentImg" @click="toggleMaskImg" class="img-mask">
            <img :src="currentImg" />
        </div>
    </el-dialog>
</template>

<script>
import Pubsub from "../../utils/pubsub";
import { getTimeStr } from "../../utils/index";
import {
    findByDictCode,
    departmentGetDepartment,
    sortingEventinfoDistribute
} from "../../config/api";
export default {
    props: {
        list: Array
    },
    data() {
        return {
			currentImg:"",
            record: {},
            formLabelWidth: "90px",
            dialogVisible: false,
            getTimeStr,
            ruleForm: {
                opinion: "",
                dealUnit: []
            },
            rules: {
                opinion: [
                    {
                        required: true,
                        message: "请输入处理意见",
                        trigger: "blur"
                    }
                ],
                dealUnit: [
                    {
                        required: true,
                        message: "请在左侧选择转发部门",
                        trigger: "change,blur"
                    }
                ]
            },
            treeData: [
                {
                    label: "肥乡区",
                    id: 0,
                    disabled: true,
                    children: []
                }
            ],
            sourceCodeList: []
        };
    },
    mounted() {
        this.pubsub_token = Pubsub.subscribe(
            "toAcceptDialog",
            (type, values) => {
                this.dialogVisible = true;
                this.record = values.item || {};
                this.getDictCode();
                this.ruleForm = {
                    opinion: "",
                    dealUnit: []
                };
                setTimeout(() => {
                    this.$refs.ruleForm.clearValidate(); //重置
                }, 0);
            }
        );
    },
    destroyed() {
        this.pubsub_token && Pubsub.unsubscribe(this.pubsub_token);
    },
    methods: {
        onShowImg(url) {
            this.currentImg = url;
        },
        /**
         * 关闭放大图片
         */
        toggleMaskImg() {
            this.currentImg = "";
        },
        /**
         * 获取数据字典--取件类型
         */
        getDictCode() {
            //事件来源数据字典
            findByDictCode({ dictCode: "sortingEventSourceCode" }).then(
                (res = {}) => {
                    this.sourceCodeList = res.data || [];
                }
            );
            departmentGetDepartment().then((res = {}) => {
                if (res.data && res.data.length) {
                    res.data.map(item => {
                        item.label = item.name;
                    });
                }
                this.treeData[0].children = res.data || [];
            });
        },
        initsourceCode(code) {
            return (
                (
                    this.sourceCodeList.find(
                        item => item.dictDataCode == code
                    ) || {}
                ).dictDataName || "-"
            );
        },
        handleNodeClick(data) {
            console.log(data);
            if (data.id) {
                this.ruleForm.dealUnit = [data];
            }
            // this.$set(this.ruleForm.dealUnit, data.id, data);
        },
        handleClose(index) {
            // this.$delete(this.ruleForm.dealUnit, index);
            this.ruleForm.dealUnit = [];
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid, values) => {
                if (valid) {
                    let { ruleForm = {}, record = {} } = this;
                    let { opinion, dealUnit = [] } = ruleForm;
                    sortingEventinfoDistribute({
                        id: record.id,
                        opinion,
                        dealUnitCode: dealUnit[0].id,
                        dealUnitName: dealUnit[0].name
                    }).then(res => {
                        this.$message({
                            message: "分拣成功",
                            type: "success"
                        });
                        Pubsub.publish("SORT_CENTER_STATISTICS"); //刷新我的统计
                        Pubsub.publish("SORT_CENTER_PRESS"); //刷新我的督办
                        Pubsub.publish("SORT_CENTER_TODO"); //刷新我的待办
                        Pubsub.publish("myBacklogList");
                        this.dialogVisible = false;
                    });
                }
            });
        }
    }
};
</script>

<style lang = "scss" scoped>
.taaept-box {
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #e5e5e5;
    > div {
        flex: 1;
        min-height: 470px;
        &:last-child {
            border-left: 1px solid #e5e5e5;
            > form {
                padding: 20px 20px 0;
            }
        }
    }
}
.tissue {
    padding: 14px 20px;
    border-bottom: 1px solid #e5e5e5;
    background-color: #f2f5ff;
}
.dialog-footer {
    margin-top: 0;
}
.taaept-tree {
    max-height: 67vh;
    overflow-y: auto;
}
</style>
<style>
.accept-dialog .el-dialog__body {
    padding: 0;
}
.taaept-tree .el-tree-node__content {
    padding: 10px 0;
    border-bottom: 1px solid #e5e5e5;
}
.fujianImg {
    display: inline-block;
    max-height: 50px;
    max-width: 100px;
    cursor: pointer;
    margin-right: 5px;
}
</style>